<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body onload="init()">
    <pre>
        Cookie: 在客户端浏览器中存储信息的一种方式
        特征：
            同一个浏览器同一个网址中的所有页面共享一套Cookie
            有数量、大小有限
            有过期时间
        
        创建cookie并存储到客户端浏览器中
            document.cookie="key=value"
        在cookie值的后面添加时效：
            document.cookie="key=value;expires=时间"

        注意：
            cookie中存储的数据类型只有一个文本类型string
            在cookie中的=代表添加
            只能通过document.cookie方式一次性获取存储的所有cookie数据，没有根据key取value的方式
            cookie失效：1）时间过期 2）手动删除[将时间清空]
            相同key值只能存储一个
        
        浏览器缓存中存储数据：sessionStorage
            存数据：
                sessionStorage.setItem("key","value")
            取数据：
                sessionStorage.getItem("key")
            注意：
                当前浏览器窗口不关，数据还在。关了，数据就丢失

        浏览器本地存储数据：localStorage
            存数据：
                localStorage.setItem("key","value")
            取数据：
                localStorage.getItem("key")
            注意：
                默认永久保存。

        JSON：带格式的字符串
            语法：
                单对象，单属性  {"key":"value"}
                单对象，多属性  {"key":"value","key":"value"}
                多对象         [{"key":"value"},{"key":"value"}] 
                               [{"":"","":""},{"":[{},{}],"":{key:value}}]
                
            将字符串对象转为JSON对象：
                JSON.parse(str)
            将JSON对象转为字符串对象：
                JSON.stringify(json)
        注意：
            一个大括号{}代表一个对象，每个对象可以包含多个属性用逗号隔开
            json的key值必须用双引号引起来，value如果是字符串也必须用双引号引起来，数字类型可以省略引号[不推荐]
            一旦识别为json对象，就可以通过json对象.key来获取value    
        

        Ajax：Async java and xml缩写。
            局部刷新技术，异步刷新技术
            可以理解为“并行”处理，实际不是。
        注意：
            浏览器会自动封装同步操的request请求[从前传到后的方式]
            浏览器不会封装异步request请求，需要自己手动封装
        使用Ajax的步骤：
            1）封装异步的ajax请求对象    
            2）封装请求：封装数据、封装地址
            3）设置回调函数获取响应结果
            4）发送请求
        注意：
            传输数据区别：
                如果是get方式发送请求，数据通过url传递。例如：url?name=value&name=value
                如果是post方式发送请求，数据通过发送请求时传递。例如：name=value&name=value
            封装请求的区别：
                如果是get请求，直接封装请求 req.open("get",url,true)
                如果是post请求，封装请求 req.open("post",url,true)
                              还要设置头信息：req.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            ajax是访问服务端的，所有需要模拟服务端使用liveserver
        
        可以使用jsonserver当做服务器，模拟服务端的服务：
            参考：安装配置JsonServer.docx

        跨域问题：一个网址不能和另一个网址默认数据互通。
                CORS跨域问题：Access-Control-Allow-Origin 通过设置请求头信息来允许该服务器网址可以由任意地址访问
                在后端设置响应头信息：
                    response.setHead("Access-Control-Allow-Origin","*")

    </pre>

    <input type="button" value="清除cookie" onclick="removeCookie()" />

    <form method="post" action="7-2.html" onsubmit="return check()">
        <table border="1" align="center" >
            <tr>
                <td>账号：</td>
                <td>
                    <input type="text" name="zh" />
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input type="password" name="mm" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="提交" />
                </td>
            </tr>
        </table>
    </form>
    <br/>
    <br/>

    <input type="button" value="使用sessionStorage存储数据" onclick="sessData()">
    <input type="button" value="使用sessionStorage取出数据" onclick="getSess()">

    <br/>
    <br/>

    <input type="button" value="使用localStorage存储数据" onclick="localData()">
    <input type="button" value="使用localStorage取出数据" onclick="getLocal()">

    <br/>
    <br/>

    <input type="button" value="演示ajax获取模拟后台数据" onclick="ajaxDemo()" />
    <br/>
    <br/>

    <input type="button" value="演示ajax获取JsonServer服务器数据" onclick="getJsonServerData()" />

    <br/>
    <br/>

    <input type="button" value="演示ajax获取Tomcat服务器数据" onclick="getTomcatServerData()" />

    <br/>
    <br/>
    <br/>
    <br/>
    <script type="text/javascript" src="js/chapter7.js" ></script>
</body>
</html>